<template>
	<div id="contacts">
		<div class="list" id="contactlist">

		</div>
	</div>
</template>

<script>
</script>

<style lang="less" scoped="scoped">
	#contacts {
		.list {
			height: 100vh;
			overflow-y: scroll;
			.contacts-item {
				display: flex;
				border-bottom: 1px solid #ebeef5;
				justify-content: flex-start;
				text-align: center;
				align-items: center;
				padding: 5px;
				.img {
					width: 40px;
					height: 40px;
					border-radius: 20px;
					overflow: hidden;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.name {
					padding-left: 10px;
					width: 50%;
					text-align: left;
					font-size: 13px;
				}
				.right {
					width: 20%;
					.count {
						width: 20px;
						height: 20px;
						border-radius: 10px;
						background-color: red;
						color: white;
						font-size: 12px;
						padding-top: 2px;
					}
				}
			}
		}
	}
</style>